<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Open Lovable - AI驱动的网站克隆工具</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .feature-icon {
            width: 64px;
            height: 64px;
            background: rgba(255, 255, 255, 0.1);
        }
        .highlight-text {
            background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
            background-repeat: no-repeat;
            background-size: 100% 40%;
            background-position: 0 90%;
        }
        .section-title {
            position: relative;
            display: inline-block;
        }
        .section-title:after {
            content: "";
            position: absolute;
            bottom: -8px;
            left: 0;
            width: 60%;
            height: 3px;
            background: linear-gradient(90deg, #667eea, #764ba2);
        }
        .code-block {
            background: #2d3748;
            border-left: 4px solid #667eea;
        }
        .mermaid {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 px-4 md:py-32">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight font-serif">
                        <span class="highlight-text">Open Lovable</span>
                        <br>AI驱动的网站克隆工具
                    </h1>
                    <p class="text-xl mb-8 opacity-90">将任何网站快速转化为可编辑的现代React应用，加速你的开发流程。</p>
                    <div class="flex flex-col sm:flex-row gap-4">
                        <a href="https://github.com/mendableai/open-lovable" target="_blank" class="bg-white text-indigo-700 hover:bg-gray-100 px-6 py-3 rounded-lg font-medium flex items-center justify-center transition duration-300 shadow-md">
                            <i class="fab fa-github mr-2 text-xl"></i> GitHub仓库
                        </a>
                        <a href="#getting-started" class="bg-transparent border-2 border-white hover:bg-white hover:text-indigo-700 px-6 py-3 rounded-lg font-medium flex items-center justify-center transition duration-300">
                            <i class="fas fa-rocket mr-2"></i> 快速上手
                        </a>
                    </div>
                </div>
                <div class="md:w-1/2 flex justify-center">
                    <div class="relative w-full max-w-md">
                        <div class="absolute -top-6 -left-6 w-full h-full bg-indigo-400 rounded-xl opacity-20"></div>
                        <div class="absolute -top-3 -left-3 w-full h-full bg-indigo-300 rounded-xl opacity-30"></div>
                        <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1755408653172-265ec8df-3c19-45ec-8a97-65743ea67597.png" alt="Open Lovable界面" class="relative w-full rounded-lg shadow-2xl border-8 border-white">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Problem Solution Section -->
    <section class="py-16 px-4 bg-white">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4 section-title">它能解决什么问题</h2>
                <p class="text-gray-600 max-w-3xl mx-auto">将灵感快速转化为现实，无需从头开始</p>
            </div>
            
            <div class="grid md:grid-cols-2 gap-12 items-center">
                <div>
                    <p class="text-lg mb-6 text-gray-700">将现有网站转化为可用的React应用通常是一个繁琐的过程。开发者需要手动分析网站结构、提取样式和内容、编写组件代码，并确保视觉一致性，这往往耗费数小时甚至数天。</p>
                    <p class="text-lg mb-6 text-gray-700">此外，现有工具可能依赖复杂的配置，生成代码质量参差不齐，或者绑定到付费平台，导致代码所有权受限。初学者和小型团队尤其难以快速实现原型开发或重现灵感网站的风格。</p>
                    <div class="bg-indigo-50 p-6 rounded-lg border-l-4 border-indigo-500">
                        <p class="text-indigo-700 font-medium"><i class="fas fa-lightbulb mr-2 text-yellow-500"></i> Open Lovable 正是为解决这些问题而设计，通过 AI 自动化抓取、分析和生成代码，显著降低开发门槛，提供可完全掌控的 React 项目。</p>
                    </div>
                </div>
                <div class="relative">
                    <div class="mermaid">
                        graph LR
                            A[手动开发] -->|耗时| B(分析网站结构)
                            B --> C(提取样式和内容)
                            C --> D(编写组件代码)
                            D --> E(确保视觉一致性)
                            E -->|数小时/天| F[完成项目]
                            G[Open Lovable] -->|AI驱动| H(自动抓取分析)
                            H --> I(生成React代码)
                            I -->|分钟级| J[完成项目]
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section class="py-16 px-4 bg-gray-50">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4 section-title">核心功能概述</h2>
                <p class="text-gray-600 max-w-3xl mx-auto">Open Lovable 提供以下4个核心功能，助力快速构建React应用</p>
            </div>
            
            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
                <div class="bg-white p-8 rounded-xl shadow-md card-hover transition duration-300">
                    <div class="feature-icon rounded-full flex items-center justify-center mb-6 mx-auto text-indigo-600">
                        <i class="fas fa-robot text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">AI驱动的网站克隆</h3>
                    <p class="text-gray-600">通过Firecrawl抓取目标网站结构和内容，生成对应的React组件和Next.js项目，保留视觉风格。</p>
                </div>
                
                <div class="bg-white p-8 rounded-xl shadow-md card-hover transition duration-300">
                    <div class="feature-icon rounded-full flex items-center justify-center mb-6 mx-auto text-green-600">
                        <i class="fas fa-comments text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">自然语言定制</h3>
                    <p class="text-gray-600">通过聊天界面，用户可以用自然语言指令（如"添加一个联系表单"）修改代码，AI自动调整组件和样式。</p>
                </div>
                
                <div class="bg-white p-8 rounded-xl shadow-md card-hover transition duration-300">
                    <div class="feature-icon rounded-full flex items-center justify-center mb-6 mx-auto text-blue-600">
                        <i class="fas fa-cogs text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">多模型支持</h3>
                    <p class="text-gray-600">兼容OpenAI、Anthropic、Groq和Gemini等语言模型，用户可选择适合的模型进行代码生成。</p>
                </div>
                
                <div class="bg-white p-8 rounded-xl shadow-md card-hover transition duration-300">
                    <div class="feature-icon rounded-full flex items-center justify-center mb-6 mx-auto text-purple-600">
                        <i class="fas fa-file-export text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">全栈项目导出</h3>
                    <p class="text-gray-600">生成包含TypeScript、Tailwind CSS和ESLint的完整Next.js项目，可直接部署到Vercel或其他平台。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Use Cases Section -->
    <section class="py-16 px-4 bg-white">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4 section-title">使用场景</h2>
                <p class="text-gray-600 max-w-3xl mx-auto">Open Lovable 在多种开发场景中都能显著提升效率</p>
            </div>
            
            <div class="grid md:grid-cols-3 gap-8">
                <div class="bg-indigo-50 p-8 rounded-xl">
                    <div class="text-indigo-600 mb-4">
                        <i class="fas fa-bolt text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">快速原型开发</h3>
                    <p class="text-gray-700 mb-4">初创公司需基于现有网站（如Airbnb）快速构建类似界面的原型。用户输入目标URL，Open Lovable抓取结构并生成React应用，开发者再通过聊天界面添加自定义功能，如搜索栏或动态路由。</p>
                </div>
                
                <div class="bg-blue-50 p-8 rounded-xl">
                    <div class="text-blue-600 mb-4">
                        <i class="fas fa-graduation-cap text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">学习与教学</h3>
                    <p class="text-gray-700 mb-4">前端开发初学者希望重现知名网站的布局（如Notion）。通过克隆并生成代码，他们可以研究生成的React组件，学习现代前端开发实践。</p>
                </div>
                
                <div class="bg-purple-50 p-8 rounded-xl">
                    <div class="text-purple-600 mb-4">
                        <i class="fas fa-pencil-alt text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">内容重塑</h3>
                    <p class="text-gray-700 mb-4">营销团队需将静态博客网站转为动态React应用。Open Lovable抓取博客结构，生成Next.js项目，用户可通过自然语言指令添加交互功能，如评论系统。</p>
                </div>
            </div>
            
            <div class="mt-12 bg-yellow-50 border-l-4 border-yellow-400 p-6 rounded-r-lg">
                <p class="text-yellow-800 font-medium"><i class="fas fa-lightbulb mr-2 text-yellow-500"></i> <strong>思考提示：</strong> 你的项目是否需要快速复制一个网站的风格？Open Lovable 如何帮助你节省原型开发时间？</p>
            </div>
        </div>
    </section>

    <!-- Advantages Section -->
    <section class="py-16 px-4 bg-gray-50">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4 section-title">优势与特色</h2>
                <p class="text-gray-600 max-w-3xl mx-auto">与其他网站克隆或代码生成工具相比，Open Lovable 的独特优势</p>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8">
                <div>
                    <div class="bg-white p-6 rounded-lg shadow-sm mb-6 flex items-start">
                        <div class="bg-indigo-100 p-3 rounded-lg mr-4">
                            <i class="fas fa-lock-open text-indigo-600 text-xl"></i>
                        </div>
                        <div>
                            <h3 class="font-bold text-lg mb-2">开源与全权控制</h3>
                            <p class="text-gray-600">采用 MIT 许可证，用户拥有生成的代码完整所有权，可自由修改和部署，无供应商锁定风险。</p>
                        </div>
                    </div>
                    
                    <div class="bg-white p-6 rounded-lg shadow-sm mb-6 flex items-start">
                        <div class="bg-blue-100 p-3 rounded-lg mr-4">
                            <i class="fas fa-code text-blue-600 text-xl"></i>
                        </div>
                        <div>
                            <h3 class="font-bold text-lg mb-2">现代化技术栈</h3>
                            <p class="text-gray-600">基于 Next.js、TypeScript 和 Tailwind CSS，生成的代码符合生产级标准，支持现代前端开发最佳实践。</p>
                        </div>
                    </div>
                    
                    <div class="bg-white p-6 rounded-lg shadow-sm mb-6 flex items-start">
                        <div class="bg-purple-100 p-3 rounded-lg mr-4">
                            <i class="fas fa-brain text-purple-600 text-xl"></i>
                        </div>
                        <div>
                            <h3 class="font-bold text-lg mb-2">灵活的 AI 集成</h3>
                            <p class="text-gray-600">支持多种语言模型（Groq 的 Kimi K2 推荐用于快速推理），用户可根据预算和需求选择模型。</p>
                        </div>
                    </div>
                </div>
                
                <div>
                    <div class="bg-white p-6 rounded-lg shadow-sm mb-6 flex items-start">
                        <div class="bg-green-100 p-3 rounded-lg mr-4">
                            <i class="fas fa-users text-green-600 text-xl"></i>
                        </div>
                        <div>
                            <h3 class="font-bold text-lg mb-2">社区驱动</h3>
                            <p class="text-gray-600">GitHub 上拥有 13.2k+ 星和 2.1k+ fork，活跃的社区支持和教程资源降低上手难度。</p>
                        </div>
                    </div>
                    
                    <div class="bg-white p-6 rounded-lg shadow-sm mb-6 flex items-start">
                        <div class="bg-red-100 p-3 rounded-lg mr-4">
                            <i class="fas fa-laptop-code text-red-600 text-xl"></i>
                        </div>
                        <div>
                            <h3 class="font-bold text-lg mb-2">本地运行</h3>
                            <p class="text-gray-600">项目可在本地运行，仅需用户提供 API 密钥，保护数据隐私并降低依赖云服务的风险。</p>
                        </div>
                    </div>
                    
                    <div class="bg-gray-100 p-6 rounded-lg border-l-4 border-gray-400">
                        <h3 class="font-bold text-lg mb-2 text-gray-700">局限性</h3>
                        <p class="text-gray-600">Open Lovable 的克隆质量依赖于目标网站的复杂性和 Firecrawl 的抓取能力，动态内容或复杂 JavaScript 逻辑可能无法完全复制。配置 API 密钥和本地环境对初学者可能有一定门槛。此外，运行成本取决于使用的语言模型和 API 调用频率，可能增加费用。</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Getting Started Section -->
    <section id="getting-started" class="py-16 px-4 bg-white">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4 section-title">上手指南</h2>
                <p class="text-gray-600 max-w-3xl mx-auto">以下是快速上手 Open Lovable 的详细步骤，适合初学者</p>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8 mb-12">
                <div>
                    <div class="mb-8">
                        <h3 class="text-xl font-bold mb-4 flex items-center">
                            <span class="bg-indigo-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3">1</span>
                            确保环境要求
                        </h3>
                        <p class="text-gray-700 mb-4">安装 Node.js（18+）和 npm：</p>
                        <div class="code-block text-gray-200 p-4 rounded-lg mb-4">
                            <code>node --version</code><br>
                            <code>npm --version</code>
                        </div>
                    </div>
                    
                    <div class="mb-8">
                        <h3 class="text-xl font-bold mb-4 flex items-center">
                            <span class="bg-indigo-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3">2</span>
                            克隆仓库
                        </h3>
                        <p class="text-gray-700 mb-4">下载项目代码并进入目录：</p>
                        <div class="code-block text-gray-200 p-4 rounded-lg mb-4">
                            <code>git clone https://github.com/mendableai/open-lovable.git</code><br>
                            <code>cd open-lovable</code>
                        </div>
                    </div>
                </div>
                
                <div>
                    <div class="mb-8">
                        <h3 class="text-xl font-bold mb-4 flex items-center">
                            <span class="bg-indigo-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3">3</span>
                            安装依赖
                        </h3>
                        <p class="text-gray-700 mb-4">运行以下命令安装所需库：</p>
                        <div class="code-block text-gray-200 p-4 rounded-lg mb-4">
                            <code>npm install</code>
                        </div>
                    </div>
                    
                    <div class="mb-8">
                        <h3 class="text-xl font-bold mb-4 flex items-center">
                            <span class="bg-indigo-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3">4</span>
                            配置环境变量
                        </h3>
                        <p class="text-gray-700 mb-4">创建 <code>.env.local</code> 文件并添加 API 密钥：</p>
                        <div class="code-block text-gray-200 p-4 rounded-lg mb-4">
                            <code>cp .env.example .env.local</code>
                        </div>
                        <p class="text-gray-700 mb-2">编辑 <code>.env.local</code>，填入以下密钥（从对应平台获取）：</p>
                        <div class="code-block text-gray-200 p-4 rounded-lg">
                            <code>E2B_API_KEY=your_e2b_api_key  # https://e2b.dev</code><br>
                            <code>FIRECRAWL_API_KEY=your_firecrawl_api_key  # https://firecrawl.dev</code><br>
                            <code>ANTHROPIC_API_KEY=your_anthropic_api_key  # https://console.anthropic.com</code><br>
                            <code>OPENAI_API_KEY=your_openai_api_key  # https://platform.openai.com</code><br>
                            <code>GEMINI_API_KEY=your_gemini_api_key  # https://aistudio.google.com</code><br>
                            <code>GROQ_API_KEY=your_groq_api_key  # https://console.groq.com (推荐 Kimi K2)</code>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="bg-blue-50 p-8 rounded-xl">
                <div class="mb-8">
                    <h3 class="text-xl font-bold mb-4 flex items-center">
                        <span class="bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3">5</span>
                        运行本地服务器
                    </h3>
                    <p class="text-gray-700 mb-4">启动开发服务器：</p>
                    <div class="code-block text-gray-200 p-4 rounded-lg mb-4">
                        <code>npm run dev</code>
                    </div>
                    <p class="text-gray-700">打开浏览器，访问 <code class="bg-blue-100 text-blue-800 px-2 py-1 rounded">http://localhost:3000</code>。</p>
                </div>
                
                <div class="mb-8">
                    <h3 class="text-xl font-bold mb-4 flex items-center">
                        <span class="bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3">6</span>
                        克隆与定制
                    </h3>
                    <ul class="list-disc pl-5 text-gray-700 space-y-2">
                        <li>在聊天界面输入目标网站 URL（如 <code>https://example.com</code>）。</li>
                        <li>AI 将抓取网站并生成 React 项目。</li>
                        <li>使用自然语言指令（如"将导航栏改为固定顶部"）定制代码。</li>
                        <li>项目完成后，点击导出，获取可编辑的 Next.js 项目文件夹。</li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-xl font-bold mb-4 flex items-center">
                        <span class="bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3">7</span>
                        部署（可选）
                    </h3>
                    <p class="text-gray-700 mb-4">将生成的项目推送到 GitHub 并部署到 Vercel：</p>
                    <div class="code-block text-gray-200 p-4 rounded-lg">
                        <code>git init</code><br>
                        <code>git add .</code><br>
                        <code>git commit -m "Initial commit"</code><br>
                        <code>git remote add origin &lt;your-repo-url&gt;</code><br>
                        <code>git push -u origin main</code>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: false,
                htmlLabels: true,
                curve: 'basis'
            }
        });
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
    </script>
</body>
</html>